<template>
  <div class="front-layout">
    <FrontNotice ref="noticeRef" />
    <FrontHeader ref="headerRef" />
    <MainBody :compact="headerCompact" :noticeVisible="noticeVisible"/>
  </div>
</template>

<script setup>
import {ref, watch, onMounted, onUnmounted} from 'vue'
import {useRoute} from 'vue-router'
import FrontNotice from "./FrontCom/FrontNotice.vue";
import FrontHeader from "./FrontCom/FrontHeader.vue";
import MainBody from "./FrontCom/FrontBody.vue";

const route = useRoute()
const noticeRef = ref(null)
const headerRef = ref(null)
const headerCompact = ref(false)
const noticeVisible = ref(true)
let lastScroll = 0
const SCROLL_THRESHOLD = 50

// 重置布局状态的方法
const resetLayoutState = () => {
  headerCompact.value = false
  noticeVisible.value = true
  lastScroll = 0
  if (noticeRef.value) noticeRef.value.toggleNotice(true)
  if (headerRef.value) headerRef.value.toggleCompact(false)
}

// 监听路由变化
watch(() => route.path, () => {
  resetLayoutState()
  window.scrollTo(0, 0)
})

const handleScroll = () => {
  const currentScroll = window.pageYOffset || document.documentElement.scrollTop
  const scrollingDown = currentScroll > lastScroll && currentScroll > SCROLL_THRESHOLD

  if (noticeRef.value) {
    noticeRef.value.toggleNotice(currentScroll <= SCROLL_THRESHOLD)
  }
  if (headerRef.value) {
    headerRef.value.toggleCompact(scrollingDown)
  }

  noticeVisible.value = currentScroll <= SCROLL_THRESHOLD
  headerCompact.value = scrollingDown

  if (currentScroll === 0) {
    resetLayoutState()
  }

  lastScroll = currentScroll <= 0 ? 0 : currentScroll
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  // 初始化时重置状态
  resetLayoutState()
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.front-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* 确保不出现水平滚动条 */
}
</style>



